//面包屑导航
crumbFn();
function crumbFn() {
    //获取商品详情页面包屑动态数据
    var detailBox = document.querySelector('.detail_top');
    detailBox.innerHTML = ''
    var detailBox_arr = goodData.path;
    // console.log(detailBox_arr)

    detailBox_arr.forEach(function (item, index) {
        if (index === detailBox_arr.length - 1) {
            var i = document.querySelector('b');
            // console.log(i)
            i.innerText = item.title;
            detailBox.appendChild(i);
        } else {
            var a = document.createElement('a');
            var span = document.createElement('span');
            a.href = item.url;
            a.innerText = item.title;
            span.innerText = '/';
            detailBox.appendChild(a);
            detailBox.appendChild(span);
        }
    })
}

//图片详情放大镜展示页
glassFn();
function glassFn() {
    //获取元素
    var s_box = document.querySelector('.detail_left_top')
    var mark = document.querySelector('.mark')

    var big_img = document.querySelector('.bigimg img')
    var bigimg = document.querySelector('.bigimg')

    s_box.onmouseenter = function () {
        //鼠标进入显示遮罩盒子和大图
        mark.style.display = 'block';
        bigimg.style.display = 'block';


        //鼠标移动事件
        s_box.onmousemove = function (e) {
            //获取鼠标位置
            var x = e.clientX;
            var y = e.clientY;
            // console.log(x,y)
            var left = x - this.getBoundingClientRect().left - mark.offsetWidth / 2;
            var top = y - this.getBoundingClientRect().top - mark.offsetHeight / 2;
            //给蒙版盒子设置最小移动范围
            if (left < 0) {
                left = 0
            }
            if (top < 0) {
                top = 0
            }
            //计算蒙版盒子最大移动范围  大盒子的到视口的宽高 - 蒙版盒子到视口的宽高
            var maxLeft = this.offsetWidth - mark.offsetWidth;
            var maxTop = this.offsetHeight - mark.offsetHeight;

            //设置给蒙版盒子最大移动范围
            if (left > maxLeft) {
                left = maxLeft
            }
            if (top > maxTop) {
                top = maxTop
            }
            //将鼠标位置赋予蒙版盒子
            mark.style.top = top + 'px';
            mark.style.left = left + 'px';

            //获取大图移动距离
            var b_move = maxLeft / (big_img.offsetWidth - bigimg.offsetWidth)
            // console.log(b_move);
            big_img.style.marginLeft = -left / b_move + 'px';
            big_img.style.marginTop = -top / b_move + 'px';
            //鼠标移出消除事件  
            s_box.onmouseleave = function () {
                //蒙版盒子跟大图隐藏
                mark.style.display = 'none'
                bigimg.style.display = 'none'

                s_box.onmousemove = null;
                s_box.onmouseleave = null;

            }
        }
    }
}

//放大镜下图片列表
manyImgList();
function manyImgList() {
    //获取图片列表
    var imgArr = goodData.imagessrc;

    var s_manyimg = document.querySelector('.detail_left_bottom_lis_ul');
    s_manyimg.innerHTML = '';
    for (var i = 0; i < imgArr.length; i++) {
        var li = document.createElement('li');
        var img = document.createElement('img');
        img.src = imgArr[i].s;
        li.appendChild(img);
        s_manyimg.appendChild(li);
    }
}

//小图片轮播
imgTab();
function imgTab() {
    var imgArr = goodData.imagessrc;

    var btn = document.querySelectorAll('.detail_left_bottom button');
    var list = document.querySelector('.detail_left_bottom_lis_ul');
    var lis = document.querySelectorAll('.detail_left_bottom_lis_ul li')
    var s_img = document.querySelector('.detail_left_top img')
    var b_img = document.querySelector('.bigimg img')


    var index = 0;
    var onceL = (lis[0].offsetWidth + 20) * 2;
    btn[0].onclick = function () {
        index--;
        // console.log(123)
        if (index < 0) {
            list.style.marginLeft = 0;
            index = 0
        } else {
            list.style.marginLeft = - onceL * index + 'px'
        }
    }
    btn[1].onclick = function () {
        index++;
        if (index * 2 > lis.length - 5) {
            list.style.marginLeft = -(lis[0].offsetWidth + 20) * (lis.length - 5) + 'px';
            index--;
        } else {
            list.style.marginLeft = - onceL * index + 'px'
        }
    }

    // console.log(b_img)
    lis.forEach(function (item, index) {
        item.onclick = function () {
            // console.log('123')
            // console.log(imgArr[index].b);
            s_img.src = imgArr[index].s;
            b_img.src = imgArr[index].b;
        }
    })
}

//右侧动态内容区域
right_cont();
function right_cont() {
    var data = goodData.goodsDetail;
    var str = `
        <div class="right_top">
            <h3>
                ${data.title}
            </h3>
            <p> ${data.recommend}</p>
            <div class="boder">
                <p>价&emsp;&emsp;格&emsp; <b>￥</b> <span>${data.price}</span> <i>降价通知</i> 
                    <em>累计评价 ${data.evaluateNum}</em></p>
            <div class="purchase">
                <span style="float: left;">促&emsp;&emsp;销&emsp; </span>
                <p><em style="float: left; height: 22px;">${data.promoteSales.type}</em>${data.promoteSales.content}</p>
            </div>

            </div>
            <div class="thank">
                <span>支&emsp;&emsp;持</span>
                <p>&emsp; ${data.support}</p>
            </div>
            <div class="bcak">
                <span>配 送 至</span>
                <p>&emsp; ${data.address}</p>
            </div>
            </div>
            
            <div class = "chose_box">
                
            </div>

            <div class="right_bottom">
            <div class="chose">
                <dl>
                    <dt>选择颜色</dt>
                    <dd>金色</dd>
                    <dd>银色</dd>
                    <dd>黑色</dd>
                </dl>
                <dl>
                    <dt>内存容量</dt>
                    <dd>16G</dd>
                    <dd>64G</dd>
                    <dd>128G</dd>
                    <dd>256G</dd>
                </dl> 
                <dl>
                    <dt>选择版本</dt>
                    <dd>公开版</dd>
                    <dd>移动版</dd>
                </dl> 
                <dl>
                    <dt>购买反式</dt>
                    <dd>官方标配</dd>
                    <dd>优惠移动版</dd>
                    <dd>电信优惠版</dd>
                </dl>
            </div>
            <div class="add">
                <div class="add_left">
                    <input type="text" name="" id="">
                    <a href="#" class="add_top">+</a>
                    <a href="#" class="add_bottom">-</a>
                </div>
                <button class="shopping">加入购物车</button>
            </div>            
        </div>
                
        `;
    var detail_right = document.querySelector('.detail_right');
    detail_right.innerHTML = str;

    var chose = document.querySelector('.chose');
    chose.innerHTML = '';
    var dlArr = data.crumbData;
    var dlStr = '';

    dlArr.forEach(function (item, index) {
        dlStr += `
            <dl index = "${index}">
                <dt>
                    ${item.title}
                </dt>
            
        `;
        item.data.forEach(function (ddItem) {
            dlStr += `
                <dd cp="${ddItem.changePrice}">
                    ${ddItem.type}
                </dd>
            `;
        })
        dlStr += '</dl>';
    })
    chose.innerHTML = dlStr;
}

//选择配置的价格计算
var priceArr = [0, 0, 0, 0];
ddClick();
function ddClick() {
    //获取dd属性
    var ODd = document.querySelectorAll('.chose dd')
    // console.log(ODd.length)
    ODd.forEach(function (item, index) {
        item.onclick = function () {
            var odl = this.parentNode;
            // console.log(odl)
            var oDds = odl.querySelectorAll('dd')
            oDds.forEach(function (item, index) {
                item.style.color = '#666';
            })
            this.style.color = 'red';


            var i = odl.getAttribute('index')
            // console.log(i)
            priceArr[i] = {
                price: this.getAttribute('cp'),
                text: this.innerText
            }

            // console.log(priceArr);


            var price = goodData.goodsDetail.price;
            for (var i = 0; i < priceArr.length; i++) {
                if (priceArr[i]) {
                    price += Number(priceArr[i].price);
                }
            }

            //修改内容区显示价格
            var priceBOx = document.querySelector('.boder span')
            // console.log(priceBOx)
            priceBOx.innerHTML = price;

            //获取到需要添加的位置
            var chose_box = document.querySelector('.chose_box')
            chose_box.innerHTML = '';
            //创建选中选项的span的元素 根据priceArr创建
            priceArr.forEach(function (item, index) {
                if (item) {
                    var span = document.createElement('span')
                    span.innerHTML = `
                        ${item.text}
                        <i index = "${index}" cp = "${item.price}">x</i>
                    `;
                    chose_box.appendChild(span);
                }
            })



            //给x添加事件且删除对应的span元素
            var ax = document.querySelectorAll('.chose_box i');
            ax.forEach(function (item, index) {
                item.onclick = function () {
                    //删除对应的span元素
                    // console.log(123)
                    var OP = this.parentNode;
                    // console.log(OP)
                    OP.remove();
                    //修改数组存储的值为 0 
                    var sex = this.getAttribute('index')
                    priceArr[sex] = 0;
                    //把dd的值变为初始化元素
                    // console.log(priceArr[sex])

                    var sDl = document.querySelectorAll('.chose dl')
                    var sDd = sDl[sex].querySelectorAll('dd')
                    sDd.forEach(function (item) {
                        item.style.color = '#666';
                        // console.log(item)
                    })
                    sDd[0].style.color = 'red';

                    //修改价格
                    var x_num = this.getAttribute('cp');
                    // console.log(x_num)
                    price -= x_num;

                    // console.log(price)
                    //修改内容区价格
                    var price_Box = document.querySelector('.boder span');
                    console.log(price)
                    price_Box.innerHTML = price;
                    chooseAdd();
                }


            })
            chooseAdd();
        }
    })
}
//选择搭配
chooseAdd();
function chooseAdd() {
    var lPriceBox = document.querySelector('.choosebox .goodsbox span')
    var priceNum = Number(document.querySelector('.boder span').innerHTML);
    // console.log(priceNum)
    //修改左侧价格
    lPriceBox.innerHTML = '￥' + priceNum

    var a_inp = document.querySelectorAll('.choosebox_list input');
    var end_price = document.querySelectorAll('.choosebox_r p')[2];



    // console.log(a_inp)
    // console.log(end_price)

    a_inp.forEach(function (item, index) {
        item.onchange = function () {

            // console.log(this.value)
            if (this.checked === true) {
                priceNum += Number(this.value);
            } else {
                priceNum -= Number(this.value);
            }
            end_price.innerHTML = '￥' + priceNum;
        }

        //循环所有checkbox
        if (item.checked) {
            priceNum += Number(item.value)
        }
    })
    end_price.innerHTML = '￥' + priceNum;

}

//选项卡的实现
man_tab();
function man_tab() {
    var a_btns = document.querySelectorAll('.btn_list > li');
    var a_boxs = document.querySelectorAll('.box_list > li');
    // console.log(a_btns)
    a_btns.forEach(function (item, index) {
        // console.log(item)
        item.onclick = function () {
            item.parentNode.querySelector('.active').classList.remove('active');
            this.className = 'active'
            a_boxs[index].parentNode.querySelector('.show').classList.remove('show');
            console.log(a_boxs[index])
            a_boxs[index].classList.add('show')
        }

    })
}


//右侧隐藏区域
open_box();
function open_box(){
    var count_button = document.querySelector('.count_button');
var right_open_box = document.querySelector('.right_open_box')
// console.log(count_button)
var flag = true;
right_open_box.style.right= -294+"px";
count_button.style.backgroundImage = 'url(../images/list.png)';
count_button.onclick = function(){
    if(flag){
        //默认关闭，应该打开
        right_open_box.style.right= 0+"px";
        count_button.style.backgroundImage = 'url(../images/cross.png)'
        

    }else {
        //现在是打开，需要关闭
        right_open_box.style.right= -294+"px";
        count_button.style.backgroundImage = 'url(../images/list.png)'

    }
    flag = !flag;
    
    // console.log(123);
}
}